<template>
  <div class="markdown-container">
    <div class="markdown-content"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import hljs from 'highlight.js';// 导入 highlight.js 库
import request from '@/utils/request.ts'

// import "highlight.js/styles/gml.css"
// let parserData = ref("")
// const getData = async () => {
//   let {data} = await axios.get("https://back.xuxiao888.com/post/1")
//   // MarkdownData.value = data.data[0].content
//   parserData.value = data.data[0].content
// }
let prop = defineProps({
  data: {
    type: String,
  },
  theme: {
    type: String,
    default: "github"
  },
  id: {
    type: Number,
  }
})
let parserData = ref(prop.data)
let htmlContent = ref('')
onMounted(async () => {
  // parserData.value = prop.data
  await getData(prop.id)

  parseMarkdown()

})
const getData = async (id) => {
  let {data} = await request.get(`https://back.xuxiao888.com/post/${id}`)
  parserData.value = data[0].content
}
// const loadHighlightTheme = async () => {
//   const themes = import.meta.glob('/node_modules/highlight.js/styles/*.css');
//   const themeFile = `/node_modules/highlight.js/styles/${prop.theme}.css`;
//
//   if (themes[themeFile]) {
//     await themes[themeFile]();
//     console.log(`Loaded theme: ${prop.theme}`);
//   } else {
//     console.error(`Theme not found: ${prop.theme}`);
//   }
// }
const parseMarkdown = () => {
  let markdown: any = parserData.value
  // 转换标题（# 后面的内容）
  markdown = markdown.replace(/^###### (.*$)/gim, '<h6 class="markdown-h6">$1</h6>');
  markdown = markdown.replace(/^##### (.*$)/gim, '<h5 class="markdown-h5">$1</h5>');
  markdown = markdown.replace(/^#### (.*$)/gim, '<h4 class="markdown-h4">$1</h4>');
  markdown = markdown.replace(/^### (.*$)/gim, '<h3 class="markdown-h3">$1</h3>');
  markdown = markdown.replace(/^## (.*$)/gim, '<h2 class="markdown-h2">$1</h2>');

  // 转换粗体 (** 或 __ 包裹的内容)
  markdown = markdown.replace(/\*\*(.*)\*\*/gim, '<strong class="markdown-bold">$1</strong>');
  markdown = markdown.replace(/__(.*)__/gim, '<strong class="markdown-bold">$1</strong>');

  // 转换斜体 (* 或 _ 包裹的内容)
  // markdown = markdown.replace(/\*(.*)\*/gim, '<em class="markdown-italic">$1</em>');
  // markdown = markdown.replace(/_(.*)_/gim, '<em class="markdown-italic">$1</em>');

  // 处理代码块并应用语法高亮
  markdown = markdown.replace(/```(\w*)\n([\s\S]*?)```/gim, (match, lang, code) => {
    const highlightedCode = hljs.highlightAuto(code, [lang]).value; // 自动检测或使用指定语言高亮
    return `<pre class="markdown-code"><code class="hljs ${lang}">${highlightedCode}</code></pre>`;
  });

  markdown = markdown.replace(/`([^`]+)`/gim, (match, code) => {
    return `<code class="markdown-inline-code">${escapeHTML(code)}</code>`;
  });

  // 转换无序列表（行首 - 或 * 的内容）
  markdown = markdown.replace(/^\s*[\*\-]\s(.*$)/gim, '<li class="markdown-list-item">$1</li>');
  markdown = markdown.replace(/(<li class="markdown-list-item">.*<\/li>)/gim, '<ul class="markdown-ul">$1</ul>');

  // 转换有序列表（行首数字. 的内容）
  markdown = markdown.replace(/^\s*\d+\.\s(.*$)/gim, '<li class="markdown-list-item">$1</li>');
  markdown = markdown.replace(/(<li class="markdown-list-item">.*<\/li>)/gim, '<ol class="markdown-ol">$1</ol>');

  // 转换链接 [文本](链接)
  markdown = markdown.replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a class="markdown-link" href="$2">$1</a>');

  // 转换图片 ![alt 文本](链接)
  markdown = markdown.replace(/!\[([^\]]*)\]\(([^)]+)\)/gim, '<img class="markdown-image" alt="$1" src="$2" />');

  // 转换引用（行首 > 的内容）
  markdown = markdown.replace(/^\s*>\s(.*$)/gim, '<blockquote class="markdown-blockquote">$1</blockquote>');

  // 转换换行符（两个换行符转换为 <br>）
  markdown = markdown.replace(/\n$/gim, '<br />');
  // 包裹没有标签的行以生成 <p> 标签
  markdown = markdown.replace(/^(?!<h\d|<ul|<ol|<li|<pre|<code|<blockquote|<img|<a|<strong|<em)(.+)$/gim, '<p class="markdown-p">$1</p>');
  htmlContent.value = markdown.trim();

  // HTML 转义函数，避免代码块中的 HTML 被解析
  function escapeHTML(html) {
    return html.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
  }

  // console.log(htmlContent.value)
  document.querySelector('.markdown-content').innerHTML = htmlContent.value;
  // 对所有的代码块进行语法高亮处理
  document.querySelectorAll('pre code').forEach((block: any) => {
    hljs.highlightElement(block); // 对每个代码块单独高亮
  });
}
</script>
<style lang="scss">
.markdown-container {

}

.markdown-content {
  padding: 16px 20px 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.5;
  word-wrap: break-word;

}

/* 标题样式 */
.markdown-h1 {
  color: #070707;
  font-size: 2em;

}

.markdown-h2 {
  color: #030303;
  font-size: 1.75em;

}

.markdown-h3 {
  color: #070707;
  font-size: 1.5em;
  margin: 15px 0 0;
}

.markdown-h4 {
  color: #000000;
  font-size: 1.25em;

}

.markdown-h5 {
  color: #000000;
  font-size: 1em;

}

.markdown-h6 {
  color: #070707;
  font-size: 0.875em;

}

/* 粗体和斜体 */
.markdown-bold {
  font-weight: bold;
  color: #222;
}

.markdown-italic {
  font-style: italic;
  color: #555;
}

/* 链接 */
.markdown-link {
  color: #1e90ff;
  text-decoration: none;
}

.markdown-link:hover {
  text-decoration: underline;
}

/* 列表样式 */
.markdown-ul {
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 20px;
}

.markdown-ol {
  list-style-type: decimal;
  margin: 1em 0;
  padding-left: 20px;
}

.markdown-list-item {
  margin: 0.5em 0;
}

/* 图片样式 */
.markdown-image {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}

/* 代码块样式 */
.markdown-code {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  margin: 1em 0;
  overflow-x: auto;
}

.markdown-inline-code {
  //background: #eee;
  background-color: #f6f8fa;
  //padding: 2px 5px;
  border-radius: 3px;
  color: #787878;
}

/* 引用样式 */
.markdown-blockquote {
  border-left: 4px solid #ddd;
  padding: 0.5em 10px;
  color: #555;
  margin: 1em 0;
  background: #f9f9f9;
}

.markdown-p {
  text-indent: 2rem;
}
</style>